<template>
  <div class="container">
    <el-carousel height="500px">
      <el-carousel-item v-for="(item, index) in carouselList" :key="index">
        <img :src="item.img" style="width: 100%; height: 100%" alt />
      </el-carousel-item>
    </el-carousel>
    <!--优秀作品-->
    <div class="outstanding-box">
      <div class="title flexRow Xcenter">
        <div class="bg">OUTSTANDING</div>
        <div class="content">
          <div class="flexRow Ycenter">
            <img src="../assets/img/outstanding-icon.png" alt />
            <span>优秀作品</span>
            <img src="../assets/img/outstanding-icon.png" alt />
          </div>
          <div>历届大赛精彩瞬间</div>
        </div>
      </div>
      <div class="banner">
        <el-carousel height="450px" indicator-position="outside" arrow="never">
          <el-carousel-item
            v-for="(items, index) in previousWorksList"
            :key="index"
          >
            <div class="flexRow">
              <div
                class="item pointer"
                v-for="(item, index1) in items"
                :key="index1"
                @click="gotoDetail(item.id)"
              >
                <img :src="item.cover" alt />
                <div class="content">
                  <div class="title">{{ item.project_name }}</div>
                  <div class="desc flexRow Xbetween">
                    <span>{{ item.category }}</span>
                    <span>{{ item.region }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!--报名-->
    <div
      class="apply-box flexCol Xend Ycenter"
      :style="`background-image: url(${adImg})`"
    >
      <!-- <div class="title">立刻加入未来发明家国际选拔赛</div>
      <div class="content">
        引导全体青少年学习并创造性地应用自己的知识储备，以展示、交流、竞技等方式进行，活动内容涉及科创、文创等
        各类智力活动成果。
      </div> -->
      <span class="btn pointer" @click="gotoApply">立即报名</span>
    </div>
    <!--赛事评委-->
    <div class="outstanding-box">
      <div class="title flexRow Xcenter">
        <div class="bg">OUTSTANDING</div>
        <div class="content">
          <div class="flexRow Ycenter">
            <img src="../assets/img/outstanding-icon.png" alt />
            <span>赛事评委</span>
            <img src="../assets/img/outstanding-icon.png" alt />
          </div>
          <div>超高级别专业评审团队</div>
        </div>
      </div>
      <div class="banner">
        <el-carousel height="450px" indicator-position="outside" arrow="never">
          <el-carousel-item v-for="(items, index) in judgesList" :key="index">
            <div class="flexRow">
              <div
                class="round-item"
                v-for="(item, index1) in items"
                :key="index1"
              >
                <img :src="item.headimgurl" alt />
                <div class="name">{{ item.name }}</div>
                <div class="job">{{ item.job }}</div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!--宣传语-->
    <div class="publicity-box" :style="`background-image: url(${adImg1})`">
      <!-- <div class="title">创品牌空间，立大美无言</div>
      <div class="content">
        肩负寻找发明灵魂，引领未来科技发展之路， 促进社会可持续发展！
      </div> -->
    </div>
    <!--证书查询-->
    <div class="outstanding-box">
      <div class="title flexRow Xcenter">
        <div class="bg">CERTIFICATE</div>
        <div class="content">
          <div class="flexRow Ycenter">
            <img src="../assets/img/outstanding-icon.png" alt />
            <span>证书查询</span>
            <img src="../assets/img/outstanding-icon.png" alt />
          </div>
          <div>查询大赛获奖证书</div>
        </div>
      </div>
      <div class="search flexRow">
        <el-input v-model="number" placeholder="请输入证书编号" clearable>
        </el-input>
        <el-button
          type="primary"
          style="margin-left: 15px"
          @click="handleSearch"
          >查询</el-button
        >
      </div>
    </div>
  </div>
</template>
 
<script>
import { ad, carouselList, previousWorksList, judgesList } from '../api/home'
import { findcertificate } from '../api/detail'
export default {
  name: 'HelloWorld',
  data() {
    return {
      adImg: '',
      adImg1: '',
      carouselList: [], // 轮播图列表
      previousWorksList: [], // 优秀作品
      judgesList: [], //赛事评委
      number: '' // 证书编号
    }
  },
  computed: {
    userInfo: {
      get() {
        return this.$store.getters.userInfo
      }
    }
  },
  created() {},
  mounted() {
    this.getAd()
    this.getCarouselList()
    this.getPreviousWorksList()
    this.getJudgesList()
  },
  methods: {
    // 推广图
    getAd() {
      ad({
        type: 'index'
      }).then((res) => {
        this.adImg = res.data.advertisement1
        this.adImg1 = res.data.advertisement2
      })
    },
    getCarouselList() {
      carouselList().then((res) => {
        this.carouselList = res.data
      })
    },
    getPreviousWorksList() {
      previousWorksList().then((res) => {
        let list = res.data.data
        let list1 = []
        list.forEach((item, index) => {
          if (item.category == 1) {
            item.category = '科创'
          } else if (item.category == 2) {
            item.category = '文创'
          }
          if (item.region == 1) {
            item.region = '中国'
          } else if (item.region == 2) {
            item.region = '国际'
          }
          for (let i = 0; i < Math.ceil(list.length / 4); i++) {
            if (!list1[i]) {
              list1[i] = []
            }
            if (list1[i].length < 4 && list[i * 4 + index]) {
              list1[i].push(list[i * 4 + index])
            }
          }
        })
        this.previousWorksList = list1
      })
    },
    getJudgesList() {
      judgesList().then((res) => {
        let list = res.data
        let list1 = []
        list.forEach((item, index) => {
          for (let i = 0; i < Math.ceil(list.length / 5); i++) {
            if (!list1[i]) {
              list1[i] = []
            }
            if (list1[i].length < 5 && list[i * 5 + index]) {
              list1[i].push(list[i * 5 + index])
            }
          }
        })
        this.judgesList = list1
      })
    },
    // 点击查询
    handleSearch() {
      if (this.number) {
        findcertificate({ number: this.number }).then((res) => {
          this.$router.push({
            path: '/resultDetail',
            query: { number: this.number }
          })
        })
      } else {
        this.$message.error('请输入证书编号')
      }
    },
    gotoApply() {
      if (JSON.stringify(this.userInfo) != '{}') {
        this.$router.push({ path: '/apply' })
      } else {
        // 呼出登录弹框
        this.$store.dispatch('settings/changeSetting', {
          key: 'loginDialogFormVisible',
          value: true
        })
      }
    },
    gotoDetail(id) {
      this.$router.push({
        path: '/worksDetail',
        query: { id }
      })
    }
  }
}
</script>
 
<style lang="scss" scoped>
.outstanding-box {
  padding-top: 98px;
  padding-bottom: 50px;
  & > .title {
    text-align: center;
    position: relative;
    .bg {
      font-size: 120px;
      color: #eff3fb;
    }
    .content {
      position: absolute;
      top: 30px;
      div:first-child {
        margin-bottom: 26px;
        img {
          width: 32px;
          height: 28px;
        }
        span {
          font-size: 36px;
          color: #262626;
          margin: 0 25px;
        }
      }
      div:last-child {
        font-size: 20px;
        color: #999999;
      }
    }
  }
  .banner {
    width: 1400px;
    margin: 0 auto;
    margin-top: 60px;

    /**样式重置 */
    /deep/ .el-carousel__indicators--outside {
      .el-carousel__button {
        width: 20px;
        height: 20px;
        background: #3385ff;
      }
    }
    .item {
      width: 334px;
      background: #ffffff;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
      margin-left: 28px;
      &:nth-child(4n + 1) {
        margin-left: 0;
      }
      img {
        width: 100%;
        height: 240px;
      }
      .content {
        padding: 24px 22px;
        .title {
          font-size: 20px;
          color: #262626;
          margin-bottom: 60px;
        }
        .desc {
          font-size: 16px;
          color: #999999;
        }
      }
    }
    .round-item {
      padding: 40px 40px 50px 40px;
      background: #ffffff;
      box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1);
      border-radius: 0px 130px 0px 0px;
      text-align: center;
      margin-left: 28px;
      &:nth-child(5n + 1) {
        margin-left: 0;
      }
      img {
        width: 180px;
        height: 180px;
        border-radius: 50%;
      }
      .name {
        font-size: 24px;
        color: #262626;
        margin: 43px 0 50px;
      }
      .job {
        font-size: 18px;
        color: #999999;
      }
    }
  }
  .search {
    width: 816px;
    margin: 0 auto;
    margin-top: 80px;
    /deep/ {
      .el-input__inner {
        height: 70px;
        font-size: 20px;
      }
      .el-button {
        padding-left: 76px;
        padding-right: 76px;
        font-size: 24px;
      }
    }
  }
}
.apply-box {
  width: 100%;
  padding: 0 0 100px;
  height: 600px;
  box-sizing: border-box;
  background: no-repeat center center;
  background-size: cover;
  text-align: center;
  .title {
    font-size: 60px;
    font-weight: 500;
    color: #ffffff;
  }
  .content {
    width: 1018px;
    font-size: 20px;
    line-height: 36px;
    color: #ffffff;
    margin: 79px auto 107px;
  }
  .btn {
    display: inline-block;
    width: 240px;
    height: 80px;
    background: #e2c281;
    border-radius: 40px;
    font-size: 32px;
    color: #ffffff;
    line-height: 80px;
  }
}
.publicity-box {
  width: 100%;
  height: 300px;
  // padding: 81px 0;
  background: no-repeat center center;
  background-size: cover;
  text-align: center;
  color: #ffffff;
  .title {
    font-size: 36px;
  }
  .content {
    width: 480px;
    font-size: 24px;
    line-height: 40px;
    opacity: 0.8;
    margin: 0 auto;
    margin-top: 39px;
  }
}
</style>